<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <template id="root">
        <div v-show="isShow">{{message}}</div>
        <div v-if="isIf">{{message}}</div>
        <div>
            <!--遍历数组-->
            <ul>
                <li v-for="(item,index) in studentNames">
                    {{index}}----{{item}}
                </li>
            </ul>
              <!--遍历对象-->
            <ul>
                <li v-for="(value,key,index) in student">
                    {{index}}--{{key}}--{{value}}
                </li>
            </ul>
             <!--遍历对象数组-->
             <ul>
                <li v-for="(item,index) in students">
                    {{index}}--{{item.id}}--{{item.name}}--{{item.content}}
                </li>
            </ul>
             <!--遍历数字
             <ul>
                <li v-for=>
                    {{index}}----{{item}}
                </li>
            </ul>-->
        </div>
        <div>
            <a v-bind:href="sinaUrl">sina</a><br>
            <a :href="sinaUrl">sina</a><br>
            <a v-bind="info">sina</a>
            
        </div>
        
        <div>
            <!--双向绑定-->
            <input type="text" v-model="message">
            <input type="text" v-bind:value="message" @input="message=$event.target.value">
        </div>
        <div>
            <button @click="buttonClick">点击</button>
        </div>
        <div>
            <p v-text="message1">hhhhhhhhhhh</p>
        </div>
        <div>
            <p v-html="message1">周杰伦</p>
        </div>
    </template>
    <script>
        const app=Vue.createApp({
           template:"#root",
           data(){
            return{
                message:"hello vue",
                message1:"<a href='https://www.baidu.com.cn'>周杰伦</a>",
                message2:"孙悟空",
                isShow:true,
                isIf:true,
                studentNames:['zhangsan','wangwu',"lisi"],
                student:{
                   name: '朱海',
                   age: 18,
                   height: 1.88
               },
                students:[
             {
               id:99,
               content:"对象数组1",
               name:"王"
             },
            {
              id:100,
              content:"对象数组2",
              name:"张"
            },
            {
              id:101,
              content:"对象数组3",
              name:"李"
           }
        ],
        sinaUrl:"https://www.sina.com.cn"
            }
           },
           method:{
            buttonClick:{
                
            }
           }
        })
        app.mount("#app")
    </script>
    
</body>
</html>